<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mydemo</title>
    <style>
    	body,div,ul,li,p {margin:0;padding:0;}
    	body {font:12px/1.5 Arial;}
    	ul {list-style-type:none;}
    	/*#nav .subnav{display:none;}*/
    	#nav {position:relative; width:910px;margin:10px auto;}
    	#nav ul {height:36px;line-height:36px;margin-left:10px;padding-right:10px;background:grey;overflow:;}
    	#nav ul li {float:left;width:110px;margin-left:-2px;}
    	#nav ul li a {font-size:14px;color:black;width:102px;display:block;text-align:center;background:green;margin:0 2px 0 4px;text-decoration:none;}
    	#nav ul li a:hover {font-weight:700;}

    	#nav .subnav {display:none;position:absolute;top:41px;width:auto !important;min-width:110px;height:27px;line-height:27px;white-space:nowrap;}
    	#nav .subnav p {margin-left:10px;}
    	/* a标签的父元素设置font-size:0;是为了消除换行产生的空白区域 */
    	#nav .subnav p span {display:block;font-size:0;}
    	#nav .subnav p a {font-size:12px;display:inline;color:white;}
		#nav .subnav p a:hover {font-weight:400;border-bottom:2px solid black;}

		#nav .subnav .arrow {position:absolute;top:-4px;display:block;width:11px;height:5px;background:black;}
    </style>
    <script>
    	var get = {
    		byId:function() {
    			return document.getElementById(id);
    		},
    		byClass:function(sClass,oParent) {
    			var aClass = [];
    			var reClass = new RegExp("(^| )" + sClass = "( |$)");
    			var aElem = this.byTagName("*",oParent);
    			for (var i=0;i<aElem.length;i++) reClass.text(aElem[i].className) && aClass.push(aElem[i]);
    				return aClass;
    		},
    		byTagName: function(elem,obj) {
    			return (obj || document).getElementsByTagName(elem);
    		}
    	};

    	windowm.onload = function() {
    		var oNav = get.byId("nav");
    		var aLi = get.byTagName("li",oNav);
    		var aSubNav = get.byClass("subnav",oNav);
    		var oSubNav = oEm = timer = null;
    		var i = 0;
    		for (i=1; i<aLi.length;i++) {
    			aLi[i].onmouseover = function() {
    				for (i=0;i<aSubNav.length;i++) aSubNav[i].sytle.display = "none";
    				oSubNav = get.ByClass("subnav",this)[0]
    			}
    		}

    		aLi[i].onmouseout = function() {
    			timer = setTimeout(function(){oSubNav.style.display="none"},300)
    		}
    	}
    </script>
</head>
<body>
	<div id="nav">
		<ul>
			<li><a href="#">站长之家</a></li>
			<li>
				<a href="#">行业资讯</a>
				<div class="subnav">
					<em class="arrow"></em>
					<p><span>
							<a href="#">业界动态</a>
							<a href="#">收购融资</a>
							<a href="#">门户动态</a>
							<a href="#">搜索引擎</a>
							<a href="#">网络游戏</a>
							<a href="#">电子商务</a>
							<a href="#">广告传媒</a>
							<a href="#">厂商开发</a>
						</span></p>
				</div>
			</li>

			<li>
				<a href="#">站长在线</a>
				<div class="subnav">
					<em class="arrow"></em>
					<p><span>
							<a href="#">站长报道</a>
							<a href="#">好站推荐</a>
							<a href="#">站长聚会</a>
							<a href="#">站长访谈</a>
							<a href="#">站长茶馆</a>
							<a href="#">网站排行</a>
						</span></p>
				</div>
			</li>

			<!-- <li>
				<a href="#">网站运营</a>
				<div class="subnav">
					<em class="arrow"></em>
					<p><span>
							<a href="#">建站经验</a>
							<a href="#">策划盈利</a>
							<a href="#">搜索优化</a>
							<a href="#">网站推广</a>
							<a href="#">免费资源</a>
						</span></p>
				</div>
			</li>
			<li>
				<a href="#">设计在线</a>
				<div class="subnav">
					<em class="arrow"></em>
					<p><span>
							<a href="#">酷站推荐</a>
							<a href="#">网页设计</a>
							<a href="#">WEB标准</a>
							<a href="#">视频处理</a>
							<a href="#">设计活动</a>
						</span></p>
				</div>
			</li>
			<li>
				<a href="#">网络编程</a>
				<div class="subnav">
					<em class="arrow"></em>
					<p><span>
							<a href="#">Asp编程</a>
							<a href="#">Php编程</a>
							<a href="#">Net编程</a>
							<a href="#">Xml编程</a>
							<a href="#">Access</a>
							<a href="#">Mssql</a>
							<a href="#">Mysql</a>
						</span></p>
				</div>
			</li>
			<li>
				<a href="#">联盟资讯</a>
				<div class="subnav">
					<em class="arrow"></em>
					<p><span>
							<a href="#">联盟动态</a>
							<a href="#">联盟介绍</a>
							<a href="#">联盟点评</a>
							<a href="#">网赚技巧</a>
						</span></p>
				</div>
			</li>
			<li>
				<a href="#">服务器</a>
				<div class="subnav">
					<em class="arrow"></em>
					<p><span>
							<a href="#">Web服务器</a>
							<a href="#">Ftp服务器</a>
							<a href="#">Mail服务器</a>
							<a href="#">Dns服务器</a>
							<a href="#">Win服务器</a>
							<a href="#">Linux服务器</a>
							<a href="#">安全防护</a>
							<a href="#">虚拟主机</a>
						</span></p>
				</div>
			</li> -->
		</ul>
	</div>
</body>
</html>